<template>
<div>
<h1>姓名：{{ person.name }}</h1>
<h1>响应年龄：{{ person.age }}</h1>
<h1>原始年龄：{{ person2.age }}</h1>
<h1>座驾：{{ person.car.name }}</h1>
<h1>价格：{{ person.car.price }}</h1>
<button @click="person.age++">修改响应年龄</button>
<button @click="person2.age++">修改原始年龄</button>
<hr>
<h1>汽车名称：{{ car.name }}</h1>
<h1>汽车价格：{{ car.price }}</h1>
<button @click="car.price++">修改汽车价格</button>
<hr>
<h1>汽车2名称：{{ car2.name }}</h1>
<h1>汽车2价格：{{ car2.price }}</h1>
<button @click="car2.price++">修改汽车2价格</button>
</div>
</template>

<script setup lang="ts">
import {reactive,toRaw,markRaw} from 'vue';

const person = reactive({
  name:'张三',
  age:18,
  car:{
    name:'宝马',
    price:1000000
  }
})
let person2 = toRaw(person);
console.log('响应式数据',person);
console.log('原始数据',person2);


let car = markRaw({
  name:'奔驰',
  price:2000000
})
let car2 = reactive(car);
</script>

<style scoped>


</style>


